<template>
  <div>
    <video  ref="videoElement" controls></video>
    <div class="col">
      <div>今日出工人数 <span class="d">111</span> </div>
      <div>安全帽违规 <span class="d">111</span> </div>
      <div>反光衣违规 <span class="d">111</span> </div>
    </div>
  </div>
</template>

<script>
import flvjs from 'flv.js';

export default {
  data () {
    return {
      flvPlayer: null,
      videoUrl: 'http://192.168.111.128:8080/live/streamName.flv' // FLV视频的URL
    };
  },
  mounted () {
    this.initFlvPlayer();
  },
  methods: {
    initFlvPlayer () {
      if (flvjs.isSupported()) {
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: this.videoUrl
        });
        this.flvPlayer.attachMediaElement(this.$refs.videoElement);
        this.flvPlayer.load();
        this.flvPlayer.play();
      } else {
        console.error('FLV not supported');
      }
    }
  },
  beforeDestroy () {
    if (this.flvPlayer) {
      this.flvPlayer.destroy();
    }
  }
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: electronicFont;
  src: url('@/assets/font/DS-DIGIT.TTF')
}

.d {
  font-size: 30px;
  font-weight: 700;
  color: #f00;
  font-family: electronicFont;
}
</style>
